<template>
    <div>
        <el-card class="!border-none mt-4 supgrade" shadow="never" v-if="qb == 1">
            <el-descriptions title="当前版本" :column="1" :size="size" :style="blockMargin">
                <el-descriptions-item label="版本号">{{
                    currentVersion
                }}</el-descriptions-item>
                <el-descriptions-item label="安装时间">{{
                    vurrentUpdate
                }}</el-descriptions-item>
            </el-descriptions>
            <div>当前应用已经是最新版</div>
        </el-card>
        <el-card class="!border-none mt-4 supgrade" shadow="never" v-if="qb == 0">
            <el-descriptions title="当前版本" :column="1" :size="size" :style="blockMargin">
                <el-descriptions-item label="名称">{{
                    qbVersion.name
                }}</el-descriptions-item>
                <el-descriptions-item label="版本号">{{
                    qbVersion.version
                }}</el-descriptions-item>
                <el-descriptions-item label="发布时间">{{
                    qbVersion.update_time
                }}</el-descriptions-item>
                
            </el-descriptions>
            <el-button @click="getVersions" type="primary" :loading="btnFlah">全量更新</el-button>
            <el-steps align-center class="stepscss" :active="currstep" :simple="false">
                <el-step v-for="(item, index) in stepsArr" :key="index">
                    <template v-slot:icon>
                        <i class="stepicon-o">
                            <i class="stepicon-i" />
                        </i>
                    </template>
                    <template v-slot:title>
                        <div class="steptitle">
                            <span>{{ item.title }}</span>
                            <span :class="'statusMsg' + item.status">{{
                                item.statusMsg
                            }}</span>
                        </div>
                    </template>
                </el-step>
            </el-steps>
            <el-descriptions :column="1" :size="size" :style="blockMargin" >
                <el-descriptions-item :label="qbVersion.last_version_no">
                  更新说明
                </el-descriptions-item>
                <el-descriptions-item label="发布于">
                    {{ qbVersion.last_create_time }}
                </el-descriptions-item>
                <el-descriptions-item v-for="(citem, cindex) in qbVersion.last_version_description" :key="cindex" label-class-name="my-label">
                    <el-tag size="small" :type="VersionTagsEnum[citem.descType]">{{ UpdateVersionTagsEnumMap[citem.descType]
                    }}</el-tag>
                    &nbsp;{{ citem.descValue }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <el-divider />
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card class="!border-none mt-4 supgrade" shadow="never" v-if="qb == 0" v-for="items in qbVersion.plugs">
            <el-descriptions title="当前版本" :column="1" :size="size" :style="blockMargin">
                <el-descriptions-item label="名称">{{
                    items.name
                }}</el-descriptions-item>
                <el-descriptions-item label="版本号">{{
                    items.version
                }}</el-descriptions-item>
                <el-descriptions-item label="发布时间">{{
                    items.update_time
                }}</el-descriptions-item>
            </el-descriptions>
            <el-steps align-center class="stepscss" :active="items.steps" :simple="false">
                <el-step v-for="(item, index) in items.cjstepsArr" :key="index">
                    <template v-slot:icon>
                        <i class="stepicon-o">
                            <i class="stepicon-i" />
                        </i>
                    </template>
                    <template v-slot:title>
                        <div class="steptitle">
                            <span>{{ item.title }}</span>
                            <span :class="'statusMsg' + item.status">{{
                                item.statusMsg
                            }}</span>
                        </div>
                    </template>
                </el-step>
            </el-steps>
            <el-descriptions :column="1" :size="size" :style="blockMargin" :title="items.last_version_no">
                <el-descriptions-item label="更新说明">
                    {{ items.last_version_no }}
                </el-descriptions-item>
                <el-descriptions-item label="发布于">
                    {{ items.last_create_time }}
                </el-descriptions-item>
                <el-descriptions-item v-for="(citem, cindex) in items.last_version_description" :key="cindex">
                    <el-tag size="small" :type="VersionTagsEnum[citem.descType]">{{ UpdateVersionTagsEnumMap[citem.descType]
                    }}</el-tag>
                    &nbsp;{{ citem.descValue }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <el-divider />
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import {
    getCurrentVersion,
    getGetVersion,
    getAuthorizationManagement,
    startUpdate,
    updateStep,
    getAppUpdate
} from "@/api/cloudupdate";
import {
    ElMessage,
    ElLoading,
    ElTag,
    ElDivider,
    ElMessageBox,
} from "element-plus";
import { UpdateVersionTagsEnumMap, VersionTagsEnum } from "@/enums/appEnums";

const props = defineProps({
    app: {
        type: String,
        default: "",
    },
});
const btnFlah = ref<boolean>(false);

const verListItem = ref<any[]>([

]);
interface cloudApInterface {
    password: string;
    account: string;
    token: string;
    site_id: string;
}
const size = ref("");
const blockMargin = computed(() => {
    const marginMap = {
        large: "32px",
        default: "28px",
        small: "24px",
    };
    return {
        marginTop: marginMap[size.value] || marginMap.default,
    };
});
const updateFlag = ref<boolean>(false);
const updateDisabled = ref(false);
const getpsStatusDesc = ["", "更新中", "更新失败", "成功"];
const stepsArr = ref([
    {
        title: "备份项目源码",
        status: 0,
        msg: "",
        statusMsg: "",
    },
    {
        title: "备份数据库",
        status: 0,
        msg: "",
        statusMsg: "",
    },
    {
        title: "下载更新数据包",
        status: 0,
        msg: "",
        statusMsg: "",
    },
    {
        title: "解压更新数据包",
        status: 0,
        msg: "",
        statusMsg: "",
    },
    {
        title: "更新本地数据库",
        status: 0,
        msg: "",
        statusMsg: "",
    },
    {
        title: "更新同步",
        status: 0,
        msg: "",
        statusMsg: "",
    },
]);
const currstep = ref(0);

const updateFn = (loading: any) => {
    if (currstep.value >= 0 && currstep.value <= 5) {
        stepsArr.value[currstep.value].status = 1;
        stepsArr.value[currstep.value].statusMsg = getpsStatusDesc[1];
        updateStep({
            app: props.app,
            currstep: currstep.value,
        })
            .then((res) => {
                console.log("updateFn res", res);
                stepsArr.value[currstep.value].status = 3;
                stepsArr.value[currstep.value].statusMsg = getpsStatusDesc[3];
                currstep.value++;
                updateFn(loading);
            })
            .catch((ret) => {
                stepsArr.value[currstep.value].msg = ret.msg;
                stepsArr.value[currstep.value].status = 2;
                stepsArr.value[currstep.value].statusMsg = getpsStatusDesc[2];
                console.log("updateFn ret", ret);
                console.log("updateFn stepsArr.value", stepsArr.value);
                loading.close();
                ElMessageBox.alert(ret.msg, "更新结果", {
                    type: "error",
                    confirmButtonText: "确认",
                });
            });
    }
    if (currstep.value >= 6) {
        updateDisabled.value = true;
        loading.close();
        if (qbVersion.value.plugs.length > 0) {
            updateCj(0)
        }
    }
};
const updateCj = async (num: any) => {
    if (qbVersion.value.plugs[num].steps >= 0 && qbVersion.value.plugs[num].steps <= 3) {
        qbVersion.value.plugs[num].cjstepsArr[qbVersion.value.plugs[num].steps].status = 1;
        qbVersion.value.plugs[num].cjstepsArr[qbVersion.value.plugs[num].steps].statusMsg = getpsStatusDesc[1];
        var snum = qbVersion.value.plugs[num].steps + 2
        updateStep({
            app: qbVersion.value.plugs[num].app,
            currstep: snum,
        })
            .then((res) => {
                console.log(qbVersion.value)
                qbVersion.value.plugs[num].cjstepsArr[qbVersion.value.plugs[num].steps].status = 3;
                qbVersion.value.plugs[num].cjstepsArr[qbVersion.value.plugs[num].steps].statusMsg = getpsStatusDesc[3];
                qbVersion.value.plugs[num].steps++;
                updateCj(num);
            })
            .catch((ret) => {
                qbVersion.value.plugs[num].cjstepsArr[qbVersion.value.plugs[num].steps].msg = ret.msg;
                qbVersion.value.plugs[num].cjstepsArr[qbVersion.value.plugs[num].steps].status = 2;
                qbVersion.value.plugs[num].cjstepsArr[qbVersion.value.plugs[num].steps].statusMsg = getpsStatusDesc[2];
                ElMessageBox.alert(ret.msg, "更新结果", {
                    type: "error",
                    confirmButtonText: "确认",
                });
            });
    }
    if (qbVersion.value.plugs[num].steps >= 4) {
        if (num < qbVersion.value.plugs.length - 1) {
            console.log(num, qbVersion.value.plugs.length)
            updateCj(num + 1)
        }
    }
}
const getVersions = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: "更新中...",
        background: "rgba(0, 0, 0, 0.7)",
    });
    updateFn(loading);

    updateCj(0)
    return false;
}
const currentVersion = ref<string>();
const vurrentUpdate = ref<string>();
onMounted(async () => {
    initGetCUrrentVersion();
});
const qbVersion = ref({

})
const qb = ref(0)
const initGetCUrrentVersion = async () => {
    await getCurrentVersion({ app: props.app })
        .then((res) => {
            currentVersion.value = res.version;
            vurrentUpdate.value = res.update_time;
        })
        .catch((ret) => { });
    await getAppUpdate({ app: props.app })
        .then((res) => {
            if (res.length == 0) {
                qb.value = 1
            }
            qbVersion.value = res
            for (var i = 0; i < res.plugs.length; i++) {
                qbVersion.value.plugs[i].steps = 0
                qbVersion.value.plugs[i].cjstepsArr = [
                    {
                        title: "下载更新数据包",
                        status: 0,
                        msg: "",
                        statusMsg: "",
                    },
                    {
                        title: "解压更新数据包",
                        status: 0,
                        msg: "",
                        statusMsg: "",
                    },
                    {
                        title: "更新本地数据库",
                        status: 0,
                        msg: "",
                        statusMsg: "",
                    },
                    {
                        title: "更新同步",
                        status: 0,
                        msg: "",
                        statusMsg: "",
                    },
                ]
            }
            console.log(qbVersion.value)
        })
        .catch((ret) => { });
    nextTick(() => {
        // handleExpand()
    });
};
</script>


<style lang="scss" scoped>
.el-descriptions {
    margin-top: 20px;
}

.supgrade {
    :deep(.el-divider--horizontal) {
        margin: 0;
    }
}

.bgsty {
    border-radius: 100%;
}

.stepscss ::v-deep .el-step__icon {
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    background-color: rgb(83, 83, 83);
}

.stepscss ::v-deep .is-finish .stepicon-o {
    width: 20px;
    height: 20px;
    border-radius: 40px;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stepscss .stepicon-i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 40px;
    background-color: white;
}

.steptitle {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    line-height: 24px;
    margin-top: 10px;
}


.statusMsg0 {}

.statusMsg1 {}

.statusMsg2 {
    color: red;
    padding: 0 10px;
    background-color: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.7);
}

.statusMsg3 {
    color: green;
    padding: 0 10px;
    background-color: rgba(0, 255, 0, 0.2);
    border: 1px solid rgba(0, 255, 0, 0.5);
}
:deep(.my-label) {
  margin:0 !important
}
</style>
